<template>
  <div class="carbon-carbon">
    <div class="main-box-carbon">
      <div class="carbonup" style="margin-top:15px;width:1200px;height:500px;margin-left: 40px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
        <div style="width:1200px;height:40px;background-color: steelblue">
          <span class="el-icon-s-data" style="color: #FFFFFF;font-size: 22px;margin-top: 8px;margin-left: 20px">CO<sub>2</sub>排放量</span>
        </div>
        <div class="flex-box-headerll" style="margin-top: 10px">
        <el-form>
        <el-tag>选择年份：</el-tag>
        <el-form-item style="display: inline-block">
            <el-date-picker class="buildingleft" v-model="year" type="year" value-format='yyyy' placeholder="选择年" size="small">
            </el-date-picker>
          <el-input  class="buildingright" v-model="month" placeholder="请输入月份" size="small"></el-input>
        </el-form-item>
        <el-button class="form-item-inline" size="small" @click="searchYear" plain icon="el-icon-search">查询</el-button>
        </el-form>
          <el-form>
            <el-tag>选择查询楼宇：</el-tag>
            <el-form-item style="display: inline-block">
              <el-select v-model="value1" multiple placeholder="请选择" size="small">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  @click.native="getBuildings(item)">
                  <!--<el-checkbox :key="item.value" v-model="item.check">{{item.label}}</el-checkbox>-->
                </el-option>
              </el-select>
            </el-form-item>
            <el-button class="form-item-inline" size="small" @click="searchBuilding()" plain icon="el-icon-search">查询</el-button>
          </el-form>
        </div>
        <div style="width: 230px;margin-left: 50px">
        <el-descriptions title="" :column="3" size="medium" :colon="false" style="font-size: 17px;font-weight: bold;">
          <el-descriptions-item>
            {{ carbonInformation.year }}年</el-descriptions-item>
          <el-descriptions-item>
            {{ carbonInformation.month }}月</el-descriptions-item>
        </el-descriptions>
        </div>
        <div id="myChart4" style="width:95%;height:300px;float:left;margin-left:40px;margin-top: 20px"></div>
      </div>
    </div>
  </div>
</template>
<script>
import MyEcharts from "../../components/Assessment";
import TanHeader from "../../components/TanHeader";
import {getCarbonBuilding} from "../../api/user";
import axios from "axios";
import {publicNetworkIpAndPort} from "../../api/globalVar";
export default {
  components: {TanHeader,MyEcharts},
  name: "",
  data() {
    return {
      options: [],
      buidingSet:new Set(),
      value1: [],
      carbonInformation: {
        year:'',
        month:'',
      },
      xValue:[],
      yValue:[],
      xxValue:[],
      yyValue:[],
      year:'',
      month:'',
      buill:'',
      buildingName:[],
    };
  },
  mounted:function() {
    this.getCarbonBar()
  },
  methods:{
    getBuildings(building){
      // var bui=[]
      console.log("building.label",building.label)
      // bui.push(building.label);
      // console.log("bui",bui)
      this.buidingSet.add(building.label)
      console.log("this.buidingSet",this.buidingSet)
    },
    searchBuilding(){
      let setTestValues = this.buidingSet.values()
      console.log("setTestValues",setTestValues)
      //let temp1 = setTestValues.next().value;
      var bui=[]
      var n=this.buidingSet.size
      // bui.push(temp1)
      for(var i=0;i<n;i++) {
        let temp1 = setTestValues.next().value
        bui.push(temp1);
      }
      console.log("bui",bui)
      this.buill=bui.toString()
      console.log("bui",this.buill)
      //debugger
      getCarbonBuilding({ year: this.year, month:this.month,buildings:this.buill }).then(res => {
        //debugger
        if (res.data.code == 200) {
          console.log(res.data)
          console.log(res.data.data.length)
          this.options=[]
          var xValueTemp = [];
          var yValueTemp = [];
          for (var i = 0; i < res.data.data.length; i++) {
            for(var j=0;j<res.data.data[i].subCarbonBuildingBarVos.length;j++) {
              xValueTemp.push(res.data.data[i].subCarbonBuildingBarVos[j].building);
              yValueTemp.push(res.data.data[i].subCarbonBuildingBarVos[j].amount);
            }
          }
          for(var i=0;i<xValueTemp.length;i++)
            if(xValueTemp[i]!=xValueTemp[i+1]) {
              this.options.push({label: xValueTemp[i], value: i});
            }
          this.xxValue = xValueTemp;
          this.yyValue = yValueTemp;
          //this.$refs.voteGraph.drawLine(xValueTemp, yValueTemp);
          console.log(this.xxValue)
          console.log(this.yyValue)
          this.myChart4 = this.$echarts.init(document.getElementById('myChart4'))
          this.myChart4.setOption({
            title: {
              text: 'CO₂排放量(kg)'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c}'
            },
            legend: {
              orient: 'vertical',
              x: 'right',
              y: 'top',
              data: ['CO₂排放量']
            },
            xAxis: {
              type:'category',
              data: this.xxValue,
              name:'楼宇',
            },
            yAxis: {},
            series: [{
              name: 'CO₂排放量',
              type: 'bar',
              data: this.yyValue,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                color: function () {
                  // 自定义颜色
                  // var colorList = ['#1ab394', '#FB4A55', 'cadetblue','#E6A23C','#409EFF','cadetblue','#409EFF','#E6A23C']
                  // return colorList[params.dataIndex]
                  return "#"+Math.floor(Math.random()*16777215).toString(16);
                }
              }
            }]
          })
        }else{
          this.$message.error(res.data.message);
        }
      }).catch(() => {
      }).finally(() => {

      });

    },
    searchYear(){
      this.carbonInformation.year = this.year;
      this.carbonInformation.month=this.month;
      //debugger
      getCarbonBuilding({ year: this.year, month:this.month,building:this.building }).then(res => {
        //debugger
        if (res.data.code == 200) {
          this.buidingSet=new Set(),
          console.log(res.data)
          console.log(res.data.data.length)
          this.options=[]

          var xValueTemp = [];
          var yValueTemp = [];
          for (var i = 0; i < res.data.data.length; i++) {
            for(var j=0;j<res.data.data[i].subCarbonBuildingBarVos.length;j++) {
              xValueTemp.push(res.data.data[i].subCarbonBuildingBarVos[j].building);
              yValueTemp.push(res.data.data[i].subCarbonBuildingBarVos[j].amount);
            }
          }
          for(var i=0;i<xValueTemp.length;i++)
            if(xValueTemp[i]!=xValueTemp[i+1]) {
              this.options.push({label: xValueTemp[i], value: i});
            }
          this.xxValue = xValueTemp;
          this.yyValue = yValueTemp;
          //this.$refs.voteGraph.drawLine(xValueTemp, yValueTemp);
          console.log(this.xxValue)
          console.log(this.yyValue)
          this.myChart4 = this.$echarts.init(document.getElementById('myChart4'))
          this.myChart4.setOption({
            title: {
              text: 'CO₂排放量(kg)'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c}'
            },
            legend: {
              orient: 'vertical',
              x: 'right',
              y: 'top',
              data: ['CO₂排放量']
            },
            xAxis: {
              type:'category',
              data: this.xxValue,
              name:'楼宇',
            },
            yAxis: {},
            series: [{
              name: 'CO₂排放量',
              type: 'bar',
              data: this.yyValue,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                color: function () {
                  // 自定义颜色
                  // var colorList = ['#1ab394', '#FB4A55', 'cadetblue','#E6A23C','#409EFF','cadetblue','#409EFF','#E6A23C']
                  // return colorList[params.dataIndex]
                  return "#"+Math.floor(Math.random()*16777215).toString(16);
                }
              }
            }]
          })
        }else{
          this.$message.error(res.data.message);
        }
      }).catch(() => {
      }).finally(() => {
      });

    },
    getCarbonBar(){
      //debugger
      getCarbonBuilding({ year: this.year, month:this.month,buildings:this.building }).then(res => {
        //debugger
        if (res.data.code == 200) {
          console.log(res.data)
          console.log(res.data.data.length)
          this.options=[]

          var xValueTemp = [];
          var yValueTemp = [];
          for (var i = 0; i < res.data.data.length; i++) {
            this.carbonInformation = res.data.data[i]
            for(var j=0;j<res.data.data[i].subCarbonBuildingBarVos.length;j++) {
              xValueTemp.push(res.data.data[i].subCarbonBuildingBarVos[j].building);
              yValueTemp.push(res.data.data[i].subCarbonBuildingBarVos[j].amount);
            }
          }
          for(var i=0;i<xValueTemp.length;i++)
            if(xValueTemp[i]!=xValueTemp[i+1]) {
              this.options.push({label: xValueTemp[i], value: i});
            }
          this.xxValue = xValueTemp;
          this.yyValue = yValueTemp;
          //this.$refs.voteGraph.drawLine(xValueTemp, yValueTemp);
          console.log(this.xxValue)
          console.log(this.yyValue)
          this.myChart4 = this.$echarts.init(document.getElementById('myChart4'))
          this.myChart4.setOption({
            title: {
              text: 'CO₂排放量(kg)'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c}'
            },
            legend: {
              orient: 'vertical',
              x: 'right',
              y: 'top',
              data: ['CO₂排放量']
            },
            xAxis: {
              data: this.xxValue
            },
            yAxis: {},
            series: [{
              name: 'CO₂排放量',
              type: 'bar',
              data: this.yyValue,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                color: function () {
                  // 自定义颜色
                  // var colorList = ['#1ab394', '#FB4A55', 'cadetblue','#E6A23C','#409EFF','cadetblue','#409EFF','#E6A23C']
                  // return colorList[params.dataIndex]
                  return "#"+Math.floor(Math.random()*16777215).toString(16);
                }
              }
            }]
          })
        }else{
          this.$message.error(res.data.message);
        }
      }).catch(() => {
      }).finally(() => {
      });

    }

  },



}
</script>
<style>
.flex-box-headerll{
  margin-left: 20px;
  margin-right: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.yearleft,.yearright{
  display: inline-block;
}
.redClass,.blueClass{
  display: inline-block;
}
.redClass{
  font-size:18px;
  font-weight: bold;
}
.blueClass{
  font-size:18px;
  font-weight: bold;
}
.buildingleft,.buildingright{
  display: inline-block;
}
.buildingleft{
  width: 500px;
  height: 10px;
}
.buildingright{
  width: 200px;
}
.redClass{
  font-size:18px;
  font-weight: bold;
}
.left{
  position: relative;
}
.table_two {
  margin: 16px;
  border-collapse: collapse;
}
.carbonbeijing{
  position: absolute;
  top: 55px;
  right: 60px;
  width: 100%;
  height: 100%;
  background: url(../../pic/co25.jpg);
  background-size: 100% 100%;

}
.carbon-carbon{
  width: 100%;
  background-size: 100% 100%;
}
.main-box-carbon {
  position: relative;
  background-color: #FFFFFF;
  width:100%;
  height:100%;
  text-align: center;
  padding:10px;
  margin-top:15px;
  margin-bottom:100px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  border-radius: 4px;
}
.left,.carbonright{
  display: inline-block;
}
.carbonright {
  vertical-align: top;
}
.carbonon,.carbonup{
  display: inline-block;
}

.carbonup {
  vertical-align: top;
}
</style>
